<template>
	<view class="boss">
		<view class="boss1">
			<view class="map">
				这里应该是一个地图
			</view>
			<view class="boss2">
				<view class="boss2-1">
					里程GO
				</view>
				<view class="boss2-2">
					<h2>路线图</h2>
					<view>
						<ul>
							<li>
								<p>累计行走里程</p>
								<p>0里</p>
							</li>
							<li>
								<p>累计行走天数</p> 
								<p>0</p>
							</li>
							<li>
								<p>排名</p>
								<p>未上榜</p>
							</li>
							<li>
								<p>兑换比例</p>
								<p>4.00+1里</p>
							</li>
							<li>
								<p>今日兑换步数</p>
								<p>0</p>
							</li>
							<li>
								<p>可兑换步数</p>
								<p>2622</p>
							</li>
						</ul>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.map{text-align: center; width: 100%; height: 100px; background-color: #f1f1f1;}
	.boss2{position: relative; padding: 30px 20px;}
	.h2{font-weight: bold;}
	.boss2-1{width: 40px; height: 40px; padding: 20px; background-color: red; text-align: center; border-radius: 70px; position: absolute; top:-40px; left: 40%; color: white; z-index: 1000; overflow: hidden;}
	.boss2-2 ul{display: flex; flex-wrap: wrap; margin-top: 20px;}
	li{width: 30%;margin-top: 10px;  margin-left: 3%; text-align: center; font-size: 0.9em;}
	li p{margin-top: 10px;}
</style>